<script lang="ts" setup>
import method from '../../global/method'
import locale from '../../locale/locale'
// import { getObjType } from '../../utils/util';

const _locale = locale()
const locale_info = _locale.info

const logoTitle = 'logoTitle'

const changeWorkbookName = () => {
  method.createHookFunction('workbookNameChangeAfter', locale_info.noName)
}
</script>

<template>
  <div id="luckysheet_info_detail_title" class="luckysheet_info_detail_back">
    <i
      style="color: #444d5a"
      class="fa fa-angle-left fa-2x"
      aria-hidden="true"
    ></i>
  </div>
  <div class="luckysheet-share-logo" :title="logoTitle"></div>
  <span class="luckysheet-share-title" style="color: #14ba81"></span>
  <div class="sheet-name">
    <input
      :data-tips="locale_info.tips"
      id="luckysheet_info_detail_input"
      class="luckysheet_info_detail_input luckysheet-mousedown-cancel"
      v-model="locale_info.noName"
      tabindex="0"
      dir="ltr"
      :aria-label="locale_info.rename"
      style="visibility: visible; width: 149px"
      :data-tooltip="locale_info.rename"
      @change="changeWorkbookName"
    />
  </div>

  <div id="luckysheet_info_detail_update" class="luckysheet_info_detail_update hidden">
    {{ locale_info.detailUpdate }}
  </div>
  <div id="luckysheet_info_detail_save" class="luckysheet_info_detail_save hidden">
    {{ locale_info.wait }}
  </div>

  <!--  <div class="inline-flex luckysheet_info_detail_save_btn">-->
  <!--    <i-->
  <!--      style="color: #444d5a"-->
  <!--      class="fa fa-save fa-2x cursor-pointer"-->
  <!--      aria-hidden="true"-->
  <!--    ></i>-->
  <!--  </div>-->

  <!-- \${functionButton} ${getObjType(userInfo) === 'string' ? `
    <div class="luckysheet_info_detail_user">
      <span id="luckysheet_info_detail_user">${userInfo}</span>
    </div>
    ` : ''} ${getObjType(userInfo) === 'object' ? `
    <div class="luckysheet_info_detail_user">
      <img src="${userInfo.userImage}" id="luckysheet_info_detail_user_img" />
      <span id="luckysheet_info_detail_user">${userInfo.userName}</span>
    </div>
    ` : ''} -->
</template>

<style lang="scss" module></style>
